<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:replace="fragments/header :: common-header">
    <title>首页 - 景点投票系统</title>
</head>
<body>
<div th:replace="fragments/navbar :: navbar"></div>

<div class="container mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="jumbotron bg-light p-5 rounded">
                <h1 class="display-4">欢迎来到景点投票系统</h1>
                <p class="lead">为您喜欢的景点投上一票，选出最受欢迎的校园景点！</p>
                <hr class="my-4">
                <p>系统提供景点展示、在线投票、结果统计等功能，帮助学校了解学生对校园景点的喜好。</p>
                <a class="btn btn-primary btn-lg" th:href="@{/result}" role="button">查看投票结果</a>
            </div>
        </div>
    </div>

    <h2 class="mb-4">景点列表</h2>

    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col" th:each="spot : ${spots}">
            <div class="card h-100 shadow-sm">
                <img th:src="@{${spot.imageUrl != null} ? ${spot.imageUrl} : '/images/default.jpg'}"
                     class="card-img-top" alt="景点图片" style="height: 200px; object-fit: cover;">
                <div class="card-body">
                    <h5 class="card-title" th:text="${spot.name}"></h5>
                    <p class="card-text text-muted" th:text="${spot.description} ?: '暂无描述'"></p>
                    <p class="card-text"><small class="text-muted" th:text="${spot.location} ?: '位置未知'"></small></p>
                </div>
                <div class="card-footer bg-transparent">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="badge bg-primary rounded-pill" th:text="'票数: ' + ${spot.voteCount}"></span>
                        <button th:if="${session.user != null}"
                                class="btn btn-outline-primary btn-sm vote-btn"
                                th:data-id="${spot.id}"
                                th:disabled="${@voteService.hasVoted(session.user.id, spot.id)}"
                                th:text="${@voteService.hasVoted(session.user.id, spot.id)} ? '已投票' : '投票'">
                            投票
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Custom JS -->
<script th:src="@{/js/vote.js}"></script>
</body>
</html>